<template>
    <div class="form">

        <el-form :model="teacherForm" status-icon :rules="rules" ref="teacherForm" v-if="btnMsg == '添加老师'">

            <el-form-item prop="teacherName">
                <el-input v-model="teacherForm.teacherName" autocomplete="off" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item prop="teacherId">
                <el-input v-model="teacherForm.teacherId" autocomplete="off" placeholder="工号"></el-input>
            </el-form-item>

            <el-form-item prop="classId">
                <el-input v-model="teacherForm.classId" autocomplete="off" placeholder="班级"></el-input>
            </el-form-item>

            <el-form-item prop="courseId">
                <el-input v-model="teacherForm.courseId" autocomplete="off" placeholder="课程"></el-input>
            </el-form-item>

            <el-form-item prop="teacherPhone">
                <el-input v-model="teacherForm.teacherPhone" autocomplete="off" placeholder="电话"></el-input>
            </el-form-item>

        </el-form>

        <el-form :model="studentForm" status-icon :rules="rules" ref="studentForm" v-if="btnMsg == '添加学生'">

            <el-form-item prop="studentName">
                <el-input v-model="studentForm.studentName" autocomplete="off" placeholder="姓名"></el-input>
            </el-form-item>

            <el-form-item prop="studentId">
                <el-input v-model="studentForm.studentId" autocomplete="off" placeholder="学号"></el-input>
            </el-form-item>

            <el-form-item prop="gradeId">
                <el-select v-model="studentForm.gradeId" placeholder="请选择年级" style="float: left;width: 100%;">
                    <el-option v-for="item in options" :key="item.id" :label="item.gradeName" :value="item.gradeId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="classId">
                <el-select v-model="studentForm.classId" placeholder="请选择班级" style="float: left;width: 100%;">
                    <el-option v-for="item in option" :key="item.id" :label="item.className" :value="item.classId">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="enterYear">
                <el-input v-model="studentForm.enterYear" autocomplete="off" placeholder="入学时间"></el-input>
            </el-form-item>

        </el-form>


        <el-form :model="gradeForm" status-icon :rules="rules" ref="gradeForm" v-if="btnMsg == '添加年级'">

            <el-form-item prop="gradeId">
                <el-input v-model="gradeForm.gradeId" autocomplete="off" placeholder="gradeId"></el-input>
            </el-form-item>

            <el-form-item prop="gradeName">
                <el-input v-model="gradeForm.gradeName" autocomplete="off" placeholder="gradeName"></el-input>
            </el-form-item>
        </el-form>


        <!-- 正在修改
        <el-form :model="lessonForm" status-icon :rules="rules" ref="lessonForm" v-if="btnMsg == '添加课时'">

            <el-form-item prop="lessonDay">
                <el-input v-model="lessonForm.lessonDay" autocomplete="off" placeholder="gradeId"></el-input>
            </el-form-item>

            <el-form-item prop="lessonWeek">
                <el-input v-model="lessonForm.lessonWeek" autocomplete="off" placeholder="gradeName"></el-input>
            </el-form-item>

        </el-form> -->

        <el-form :model="courseForm" status-icon :rules="rules" ref="courseForm" v-if="btnMsg == '添加课程'">

            <el-form-item prop="courseDesc">
                <el-input v-model="courseForm.courseDesc" autocomplete="off" placeholder="courseDesc"></el-input>
            </el-form-item>

            <el-form-item prop="courseId">
                <el-input v-model="courseForm.courseId" autocomplete="off" placeholder="courseId"></el-input>
            </el-form-item>

            <el-form-item prop="courseName">
                <el-input v-model="courseForm.courseName" autocomplete="off" placeholder="courseName"></el-input>
            </el-form-item>

        </el-form>

        <el-form :model="courseSyncForm" status-icon :rules="rules" ref="courseSyncForm" v-if="btnMsg == '添加同步课'" >
            <el-form-item>
                <el-input placeholder="同步课名称" v-model="courseSyncForm.courseExtendName" class="input-with-select">
                    <!-- <template slot="prepend">{{new Date().getFullYear()}}年</template> -->
                    <el-select v-model="courseSyncForm.courseId" slot="append" placeholder="请选择课程" style="width: 120px;">
                        <el-option v-for="(item, index) in courseList" :key="item.id" :label="item.courseName"
                            :value="item.courseId"></el-option>
                    </el-select>
                </el-input>
            </el-form-item>

            <el-form-item prop="courseExtendDesc">
                <el-input v-model="courseSyncForm.courseExtendDesc" autocomplete="off" placeholder="请添加课程描述"></el-input>
            </el-form-item>

            <el-form-item prop="gradeId">
                <el-select v-model="courseSyncForm.gradeId" placeholder="请选择年级" style="width: 100%;">
                    <el-option v-for="(item, index) in gradeList" :key="item.id" :label="item.gradeName"
                        :value="item.gradeId"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="semesterId">
                <el-select v-model="courseSyncForm.semesterId" placeholder="请选择学期" style="width: 100%;">
                    <el-option v-for="(item, index) in semesterList" :key="item.id"
                        :label="item.academicYear + '年' + item.semester + '学期'" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>        


        <el-form :model="lessonForm" status-icon :rules="rules" ref="lessonForm" v-if="btnMsg == '添加课时'">

            <el-form-item prop="lessonDay">
                <el-input v-model="lessonForm.lessonDay" autocomplete="off" placeholder="lessonDay"></el-input>
            </el-form-item>

            <el-form-item prop="lessonWeek">
                <el-input v-model="lessonForm.lessonWeek" autocomplete="off" placeholder="lessonWeek"></el-input>
            </el-form-item>

            <el-form-item prop="gradeId">
                <el-input v-model="lessonForm.gradeId" autocomplete="off" placeholder="gradeId"></el-input>
            </el-form-item>

        </el-form>

        <el-form :model="semesterForm" status-icon :rules="rules" ref="lessonForm" v-if="btnMsg == '添加学期'">

            <el-form-item prop="academicYear">
                <el-input v-model="semesterForm.academicYear" autocomplete="off" placeholder="请输入学年"></el-input>
            </el-form-item>

            <el-form-item prop="semester">
                <el-select v-model="semesterValue" placeholder="请选择" style="width: 100%">
                    <el-option
                    v-for="item in semesterOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>

        <el-form :model="classForm" status-icon :rules="rules" ref="classForm" v-if="btnMsg == '添加班级'">

            <el-form-item prop="classNum">
                <el-input v-model="classForm.classNum" autocomplete="off" placeholder="classNum"></el-input>
            </el-form-item>

            <el-form-item prop="gradeId">
                <el-input v-model="classForm.gradeId" autocomplete="off" placeholder="gradeId"></el-input>
            </el-form-item>

        </el-form>

        <el-form :model="classSingleForm" status-icon :rules="rules" ref="classForm" v-if="btnMsg == '添加单个班级'">
            <el-form-item label="班主任:" filterable label-width="80px">
                <el-select v-model="teacherValue" placeholder="请选择">
                <el-option
                v-for="item in teacherData"
                :key="item.id"
                :label="item.teacherName"
                :value="item.id">
                </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="课程组合:" label-width="80px">
                <el-select v-model="courseCombinationValue" placeholder="请选择">
                    <el-option
                    v-for="item in courseCombinationData"
                    :key="item.id"
                    :label="item.combinationName"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="年级:" label-width="80px">
                <el-select v-model="gradeValue" placeholder="请选择">
                    <el-option
                    v-for="item in gradeData"
                    :key="item.id"
                    :label="item.gradeName"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="班级名称:" prop="className" label-width="80px" >
                <el-input v-model="classSingleForm.className" autocomplete="off" placeholder="请输入班级名称"></el-input>
            </el-form-item>

        </el-form>

        <div class="submit">
            <el-button type="primary" @click="submitClassForm('classForm')" style="width: 100%;" v-if="btnMsg == '添加班级'">{{
                btnMsg
            }}</el-button>
            <el-button type="primary" @click="submitSingleClassForm('classForm')" style="width: 100%;" v-if="btnMsg == '添加单个班级'">{{ btnMsg
            }}</el-button>
            <el-button type="primary" @click="submitLessonForm('lessonForm')" style="width: 100%;" v-if="btnMsg == '添加课时'">{{ btnMsg
            }}</el-button>
            <el-button type="primary" @click="submitSemesterForm('lessonForm')" style="width: 100%;" v-if="btnMsg == '添加学期'">{{ btnMsg
            }}</el-button>
            <el-button type="primary" @click="submitTeacherForm('teacherForm')" style="width: 100%;"
                v-if="btnMsg == '添加老师'">{{
                    btnMsg
                }}</el-button>
            <el-button type="primary" @click="submitStudentForm('studentForm')" style="width: 100%;"
                v-if="btnMsg == '添加学生'">{{
                    btnMsg
                }}</el-button>
            <el-button type="primary" @click="submitGradeForm('gradeForm')" style="width: 100%;" v-if="btnMsg == '添加年级'">{{
                btnMsg
            }}</el-button>
            <el-button type="primary" @click="submitCourseForm('courseForm')" style="width: 100%;"
                v-if="btnMsg == '添加课程'">{{
                    btnMsg
                }}</el-button>
            <el-button type="primary" @click="submitCourseSyncForm('courseSyncForm')" style="width: 100%;"
                v-if="btnMsg == '添加同步课'">{{ btnMsg
                }}</el-button>
        </div>
        <slot name="login"></slot>
    </div>
</template>

<script>

export default {

  name: 'FormAdd',
  props: {
    btnMsg: String,
    currentPage: Number,
    pageSize: Number,
    page: Number,
    gradeList: Array,
    courseList: Array,
    semesterList: Array,
    teacherData: Array,
    courseCombinationData: Array,
    gradeData: Array
  },
  data() {
    return {
      schoolId: 1,
      gosemester: false,
      gradeForm: {
        gradeId: '',
        gradeName: '',
        schoolId: 1,
      },
      classForm: {
        classId: 0,//0
        className: '',//0
        classNum: '',
        gradeId: '',
        headTeacher: 0,//0
        schoolId: 1,
        courseCombination: 0
      },
      classSingleForm: {
        classId: 0,
        className: "",
        courseCombination: 0,
        gradeId: '',
        headTeacher: 0,
        schoolId: 0
      },
      teacherForm: {
        teacherName: '',
        courseId: '',
        teacherPhone: '',
        classId: '',
        teacherId: '',
      },
      teacherValue: "",
      courseCombinationValue: "",
      gradeValue: "",
      semesterValue: "",
      studentForm: {
        studentName: '',
        schoolId: 1,
        studentId: '',
        gradeId: '',
        classId: '',
        enterYear: ''
      },
      courseSyncForm: {
        // 同步课课程具体描述
        courseExtendDesc: "",
        // 同步课课程名字
        courseExtendName: "",
        // 课程ID
        courseId: "",
        gradeId: "",
        schoolId: 1,
        // 学期ID
        semesterId: ""
      },
      courseForm: {
        // 课程的描述
        courseDesc: "",
        // 课程ID
        courseId: '',
        // 课程名称
        courseName: '',
        // 学校ID
        schoolId: 1,
      },
      semesterOptions: [{
        value: '1',
        label: '上学期'
      }, {
        value: '2',
        label: '下学期'
      }],
      lessonForm: {
        gradeId: '',
        lessonDay: '',
        lessonWeek: '',
        schoolId: 1
      },
      semesterForm: {
        schoolId: 1,
        academicYear: "",
        semester: ""
      },
      options: [],
      option: [],
      rules: {
        teacherId: [
          {required: true, message: '工号不能为空', trigger: 'blur'}
        ],
        teacherName: [
          {required: true, message: '姓名不能为空', trigger: 'blur'}
        ],
        teacherPhone: [
          {required: true, message: '电话不能为空', trigger: 'blur'}
        ],
        classId: [
          {required: true, message: '班级不能为空', trigger: 'blur'}
        ],
        gradeName: [
          {required: true, message: 'gradeName不能为空', trigger: 'blur'}
        ],
        courseExtendDesc: [
          {required: true, message: 'courseExtendDesc不能为空', trigger: 'blur'}
        ],
        courseExtendName: [
          {required: true, message: 'courseExtendName不能为空', trigger: 'blur'}
        ],
        gradeId: [
          {required: true, message: 'gradeId不能为空', trigger: 'blur'},
          {validator: isNum, message: 'gradeId必须为数字', trigger: 'blur'}
        ],
        courseId: [
          {required: true, message: 'courseId不能为空', trigger: 'blur'}
        ],
        courseName: [
          {required: true, message: 'courseName不能为空', trigger: 'blur'}
        ],
        lessonDay: [
          {required: true, message: 'lessonDay不能为空', trigger: 'blur'}
        ],
        lessonWeek: [
          {required: true, message: 'lessonWeek不能为空', trigger: 'blur'}
        ],
        courseDesc: [
          {required: true, message: 'courseDesc不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    setUser: function () {
      this.$emit('transfer', "返回了信息")//触发transfer方法，this.user 为向父组件传递的数据
    },
    async submitGradeForm(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          console.log(this.gradeForm);
          let res = await this.$axios.post('http://39.105.215.62:8200/grade/addGrade', {
            ...this.gradeForm,
            schoolId: this.schoolId
          });
          console.log(res);
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.$emit('success', true)
          } else {
            this.$message.error(res.msg);
          }
        } else {
          console.log(`${this.btnMsg}失败!!`);
          return false;
        }
      });
    },
    async submitTeacherForm(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          console.log(this.teacherForm);
          let res = await this.$axios.post('http://39.105.215.62:8100/teacher/addTeacher', {
            ...this.teacherForm,
            schoolId: this.schoolId
          });
          console.log(res);
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.$emit('success', true)
          } else {
            this.$message.error(res.msg);
          }
        } else {
          console.log(`${this.btnMsg}失败!!`);
          return false;
        }
      });
    },
    // 添加学生
    async submitStudentForm(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          console.log(this.studentForm);
          let res = await this.$axios.post('http://39.105.215.62:8100/student/addStudent', {
            ...this.studentForm,
            schoolId: this.schoolId
          });
          console.log(res);
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.$emit('success', true)
          } else {
            this.$message.error(res.msg);
          }
        } else {
          console.log(`${this.btnMsg}失败!!`);
          return false;
        }
      });
    },
    async getGrageList() {
      let result = await this.$axios.post(`http://39.105.215.62:8200/grade/findGrades?pageNum=1&pageSize=10`, {
        gradeId: "",
        gradeName: "",
        schoolId: this.schoolId
      });
      this.options = result.data.records;
      // for (let i = 0; i < result.data.records.length; i++) {
      //     let obj = {}
      //     obj.value = i;
      //     obj.label = result.data.records[i].gradeId;
      //     this.options.push(obj)
      // }
    },

        async getClassList() {
            let result = await this.$axios.post(`http://39.105.215.62:8200/class/selectClasses?pageNum=1&pageSize=10`, { gradeId: 0, schoolId: this.schoolId });
            console.log(result);
            this.option = result.data.records;
            console.log(this.option);
            // for (let i = 0; i < result.data.records.length; i++) {
            //     let obj = {}
            //     obj.value = i;
            //     obj.label = result.data.records[i].classId;
            //     this.option.push(obj)
            // }
        },
        async submitCourseForm(form) {
            this.$refs[form].validate(async (valid) => {
                if (valid) {
                    let res = await this.$axios.post('http://39.105.215.62:8200/course/addCourse', { ...this.courseForm, schoolId: this.schoolId })
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success(res.msg);
                        this.$emit('success', true);
                    } else {
                        this.$message.error(res.msg);
                    }
                } else {
                    console.log(`${this.btnMsg}失败!!`);
                    return false;
                }
            })
        },
        async submitLessonForm(form) {
             this.$refs[form].validate(async (valid) => {
                console.log({ ...this.lessonForm });
                let obj = {...this.lessonForm};
                obj.lessonDay = Number(obj.lessonDay);
                obj.lessonWeek = Number(obj.lessonWeek);
                obj.gradeId = Number(obj.gradeId);
                console.log(obj);
                if (valid) {
                    this.$axios.post('http://39.105.215.62:8200/lesson/addLesson', obj)
                        .then(async (res) => {
                            console.log(res);
                            if (res.code == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                            this.$emit('success', true)

                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                }
            )
        },
        async submitSemesterForm(form) {
             this.$refs[form].validate(async (valid) => {
                console.log({ ...this.semesterForm });
                let obj = {...this.semesterForm};
                obj.semester = Number(this.semesterValue);
                obj.academicYear = Number(obj.academicYear);
                console.log(obj);
                if (valid) {
                        if(this.semesterValue == '1' || this.semesterValue == '2') {
                            this.$axios.post('http://39.105.215.62:8200/semester/addSemester', obj)
                                .then(async (res) => {
                                    console.log(res);
                                    if (res.code == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: 'success'
                                        });
                                        this.semesterForm.academicYear = '';
                                        this.semesterValue = '';
                                        this.$emit('success', true)
                                    } else {
                                        this.$message.error(res.msg);
                                    }
                                })
                        } else {
                            this.$message.error("请选择学期");
                        }
                    }
                }
            )
        },
        async submitCourseSyncForm(form) {
            this.$refs[form].validate(async (valid) => {
                console.log({ ...this.courseSyncForm });
                if (valid) {
                    let result = await this.$axios.post(`http://39.105.215.62:8200/course/selectCourses?pageNum=${this.currentPage}&pageSize=${this.pageSize}`, { schoolId: this.schoolId, courseId: this.courseSyncForm.courseId });
                    let name = this.courseSyncForm.courseExtendName + result.data.records[0].courseName
                    let res = await this.$axios.post('http://39.105.215.62:8200/coursesync/addCourseSync', { ...this.courseSyncForm, courseExtendName: name })
                    if (res.code == 200) {
                        this.$message.success(res.msg);
                        console.log(res);
                        this.$emit('success', true)
                        this.courseSyncForm = {
                            courseExtendDesc: "",
                            courseExtendName: "",
                            courseId: "",
                            gradeId: "",
                            schoolId: 1,
                            // 学期ID
                            semesterId: ""
                        }
                    }
                } else {
                    console.log(`${this.btnMsg}失败！`);
                }
            }
            )
        },
        async submitClassForm(form) {
            console.log(this.page);
            this.$refs[form].validate(async (valid) => {
                if (valid) {
                    console.log(this.classForm);
                    let obj = {};
                    for (let item in this.classForm) {
                        if (item != 'classNum') {
                            obj[item] = this.classForm[item]
                        }
                    }
                    obj.gradeId = Number(obj.gradeId);
                    obj.gradeId = Number(obj.gradeId);
                    let res = await this.$axios.post(`http://39.105.215.62:8200/class/addClassAuto?classNum=${this.classForm.classNum}`, obj);
                    if (res.code == 200) {
                        this.$message.success(res.msg);
                        this.$emit('success', true)
                    }
                    console.log(res);
                } else {
                    console.log(`${this.btnMsg}失败!!`);
                    return false;
                }
            })
        },
        addSemester() {
            this.gosemester = !this.gosemester
            this.$emit('showcount',this.gosemester)
        },
        async submitSingleClassForm() {
            console.log(this.teacherValue, this.courseCombinationValue, this.gradeValue);
            console.log(this.classSingleForm);
            this.classSingleForm.gradeId = this.gradeValue;
            this.classSingleForm.headTeacher = this.teacherValue;
            this.classSingleForm.courseCombination = this.courseCombinationValue;
            console.log(this.classSingleForm);
            let result = await this.$axios.post("http://39.105.215.62:8200/class/addClass", this.classSingleForm);
            console.log(result);
        }
    },
    // 生命周期函数--钩子函数一般在初始化页面完成后，再对DOM节点进行相关操作
    async mounted() {
        this.schoolId = JSON.parse(sessionStorage.getItem('info')).schoolId;
        this.getGrageList();
        this.getClassList();
    }
}

const isNum = (rule, value, callback) => {
  const age = /^[0-9]*$/i
  if (!age.test(value)) {
    callback(new Error())
  } else {
    callback()
  }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form {
    padding: 30px;
    width: 70%;
}

.submit {
    margin: 40px auto;
}
</style>
  